<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <p ref="p">{{count}}</p>
        <p>{{doubleCount}}</p>
        <p>{{tripleCount}}</p>
        <p><button @click="addCount">点击++</button></p>
    </div>
</body>
<script>
    // Vue2    
    // new Vue => 构造函数
    // vm 实例化对象(存储数据 方法)
    // var vm = new Vue({
    //     el:"#app",
    //     data:{
    //         msg:"hello world"
    //     },
    //     methods:{},
    //     computed:{},
    //     watch:{},
    //     provide:{},
    //     beforeCreate() {
            
    //     },
    //     created() {
            
    //     },
    //     beforeMount() {
            
    //     },
    //     mounted() {
            
    //     },
    //     beforeUpdate() {
            
    //     },
    //     updated() {
            
    //     },
    //     beforeDestroy() {
            
    //     },
    //     destroyed() {
            
    //     },
    // })




</script>
<script>

    // Vue3  => 选项式API

    console.log(Vue);

    var {createApp} = Vue;


    // createApp创建实例(应用)的方法 => 可以接收options选项配置 => 返回创建实例(应用)

    // 声明式渲染
    var app = createApp({
        data(){
            return {
                msg:"hello world",
                count:1,
            }
        },
        methods:{
            addCount(){
                this.count++;
            }
        },
        computed:{
            doubleCount(){
                return this.count * 2
            },
            tripleCount(){
                return this.count * 3
            }
        },
        watch:{
            // count(newVal,oldVal){
            //     console.log("count改变了",newVal,oldVal);
            //     this.$nextTick(()=>{
            //         console.log(this.$refs.p.textContent);
            //     })
            // },
            count:{
                handler(newVal,oldVal){
                    console.log("count改变了",newVal,oldVal);
                        console.log(this.$refs.p.textContent);
                },
                // deep:true,
                // immediate:true,
                flush:"post", //  等视图更新完毕之后 在执行handler函数
            }
        },
        mounted(){
            // this ->代理对象(需要通过代理对象来访问数据/方法)
            console.log(this);
        }
    })

    console.log(app);
    app.mount("#app");



</script>
</html>